<template>
  <div class="container-content">
    <el-form
      ref="formRef"
      :model="kingBomEntity"
      label-width="90px"
      label-position="left"
    >
      <el-card shadow="never" class="mt20">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="BOM版本">
              <el-input
                v-model="kingBomEntity.kingBomEntity.bomVersion"
                readonly
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="BOM简称">
              <el-input v-model="kingBomEntity.kingBomEntity.bomAs"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单据类型">
              <el-select
                v-model="kingBomEntity.kingBomEntity.docTypeCode"
                placeholder="BOM分类"
                style="width: 100%"
                suffix-icon="el-icon-search"
              >
                <el-option label="物料清单" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父项物料编码">
              <el-input
                v-model="kingBomEntity.kingBomEntity.parentMaterialCode"
                suffix-icon="el-icon-search"
                @focus="openList('父项物料编码')"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="父项物料单位">
              <el-input
                v-model="kingBomEntity.kingBomEntity.parentMaterialName"
                suffix-icon="el-icon-search"
                @focus="openList('父项物料单位')"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="BOM分类">
              <el-select
                v-model="kingBomEntity.kingBomEntity.bomClassify"
                placeholder="BOM分类"
                style="width: 100%"
                suffix-icon="el-icon-search"
              >
                <el-option label="标准BOM" value="1"></el-option>
                <el-option label="配置BOM" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="BOM用途">
              <el-select
                v-model="kingBomEntity.kingBomEntity.bomUseTo"
                placeholder="BOM用途"
                style="width: 100%"
                suffix-icon="el-icon-search"
              >
                <el-option label="通用" value="99"></el-option>
                <el-option label="自制" value="2"></el-option>
                <el-option label="委外" value="3"></el-option>
                <el-option label="组装" value="4"></el-option>
                <el-option label="报价" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <el-form-item label="BOM分组">
              <el-input
                v-model="kingBomEntity.kingBomEntity.bomGroup"
                suffix-icon="el-icon-search"
                @focus="openList('BOM分组')"
              >
              </el-input>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="描述">
              <el-input
                v-model="kingBomEntity.kingBomEntity.bomDesc"
                type="textarea"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <div class="desc-title">BOM清单</div>
      <el-table
        :data="kingBomEntity.kingBomDetailEntities"
        style="width: 100%"
        highlight-current-row
        border
        :key="flag"
      >
        <template #empty
          ><el-button plain type="primary" round @click="addNewRow"
            >添加新行</el-button
          ></template
        >
        <el-table-column label="操作" width="120px">
          <template slot-scope="scope">
            <el-button
              plain
              icon="el-icon-plus"
              size="small"
              @click="handleDataAdd(scope.$index, scope.row)"
            ></el-button>
            <el-button
              plain
              icon="el-icon-minus"
              size="small"
              @click="handleDataDelete(scope.$index, scope.row)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="次项" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.warehouseId" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="子项物料编码" width="100" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0px" style="margin: 0">
              <el-input
                v-model="scope.row.childMaterialCode"
                :disabled="kingBomEntity.kingBomEntity.parentMaterialCode==''"
              >
                <i
                slot="suffix"
                class="el-icon-search"
                @click="openList('子项物料编码', scope.$index)"
              ></i>
              </el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="子项物料名称" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.childMaterialName" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="子项规格型号" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.taxPrice" disabled></el-input>
          </template>
        </el-table-column>
        <!-- <el-table-column label="子项物料属性" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.taxRate" disabled></el-input>
          </template>
        </el-table-column> -->
        <el-table-column label="供应类型" width="100" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.supplyType">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="子项类型" width="100" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.childType">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="子项单位"
          prop="childUnitCode"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <el-input v-model="scope.row.childUnitCode">
              <i
                slot="suffix"
                class="el-icon-search"
                @click="openList('单位', scope.$index)"
              ></i>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="用量类型" width="100" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.taxMoney">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="用量:分子" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.usageNumerator"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="用量:分母" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.usageDenominator"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="固定损耗" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.fixedLoss"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="变动损耗率%" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.varLossRate"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="供应组织" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.supplyDeptCode" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="子项BOM版本" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.childBomVersion" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="子项产品模型" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.taxMoney" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remarks"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="发料组织" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sendDeptCode" disabled></el-input>
          </template>
        </el-table-column>
        <el-table-column label="默认发料仓库" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sendWarehouseName">
              <i
                slot="suffix"
                class="el-icon-search"
                @click="openList('明细', scope.$index)"
              ></i>
            </el-input>
          </template>
        </el-table-column>
        <el-table-column label="生效日期" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ramarks"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="发料方式" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ramarks"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="净需求比例" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ramarks" disabled></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        width="60%"
        :title="title"
        :visible.sync="dialogTableVisible"
        :append-to-body="list"
      >
        <el-table
          :data="gridData"
           @row-dblclick="getRow"
          v-if="title == '父项物料编码'"
        >
          <el-table-column
            property="materialGroup"
            label="编码"
          ></el-table-column>
          <el-table-column
            property="materialName"
            label="名称"
          ></el-table-column>
          <el-table-column property="model" label="规格型号"></el-table-column>
          <el-table-column property="" label="数据状态"></el-table-column>
          <el-table-column property="" label="禁用状态"></el-table-column>
          <el-table-column
            property="materialProperty"
            label="物料属性"
          ></el-table-column>
          <el-table-column property="address" label="unit"></el-table-column>
          <el-table-column property="address" label="已使用"></el-table-column>
        </el-table>
        <el-table
          :data="gridData"
           @row-dblclick="getRow"
          v-if="title == '父项物料单位'"
        >
          <el-table-column
            property="meteringUnitCode"
            label="编码"
          ></el-table-column>
          <el-table-column
            property="meteringUnitName"
            label="名称"
          ></el-table-column>
          <el-table-column
            property="isBase"
            label="基准计量单位"
          ></el-table-column>
          <el-table-column property="isUsed" label="数据状态"></el-table-column>
        </el-table>
        <el-table
          :data="gridData"
           @row-dblclick="getRow"
          v-if="title == '子项物料编码'"
        >
          <el-table-column
            property="materialCode"
            label="编码"
          ></el-table-column>
          <el-table-column
            property="materialName"
            label="名称"
          ></el-table-column>
          <el-table-column property="model" label="规格型号"></el-table-column>
          <el-table-column
            property="taxType"
            label="物料属性"
          ></el-table-column>
          <el-table-column
            property="unit"
            label="基本单位"
          ></el-table-column>
        </el-table>
        <el-table :data="gridData"  @row-dblclick="getRow" v-if="title == '明细'">
           <el-table-column property="wareName" label="名称"></el-table-column>
        <el-table-column property="wareCode" label="编码"></el-table-column>
        <el-table-column property="userId" label="创建人"></el-table-column>
        <el-table-column property="wareManagement" label="仓管id"></el-table-column>
        </el-table>
        <el-table :data="gridData"  @row-dblclick="getRow" v-if="title == '单位'">
          <el-table-column
            property="meteringUnitCode"
            label="编码"
          ></el-table-column>
          <el-table-column
            property="meteringUnitName"
            label="名称"
          ></el-table-column>
          <el-table-column
            property="isBase"
            label="基准计量单位"
          ></el-table-column>
          <el-table-column property="isUsed" label="数据状态"></el-table-column>
        </el-table>
        <el-table
          :data="gridData"
           @row-dblclick="getRow"
          v-if="title == 'BOM分组'"
        >
          <el-table-column
            property="shipperCode"
            label="名称"
          ></el-table-column>
          <el-table-column
            property="address"
            label="职员编码"
          ></el-table-column>
          <el-table-column property="address" label="部门"></el-table-column>
          <el-table-column
            property="address"
            label="禁用状态"
          ></el-table-column>
        </el-table>
         <span slot="footer" class="dialog-footer">
            <el-button @click="dialogTableVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogTableVisible = false"
              >确 定</el-button
            >
          </span>
      </el-dialog>
    </el-form>
  </div>
</template>
<script>
import {
  addBOMList,
  getMaterial,
  getKingDocTypeList,
  getMaterialList,
  getKingBaseMeteringUnitList,
  getWarehouseList
} from "@/api/bim/bim";
export default {
  data() {
    return {
        businessType: "29",
            modelId: this.$store.state.workflow.businessConfig.id,
      options: [
        {
          label: "采购",
          value: "C",
        },
        {
          label: "自制",
          value: "Z",
        },
        {
          label: "委外",
          value: "W",
        },
      ],
      options1: [
        {
          label: "标准件",
          value: "1",
        },
        {
          label: "返还件",
          value: "2",
        },
        {
          label: "替代件",
          value: "3",
        },
      ],
      options2: [
        {
          label: "固定",
          value: "1",
        },
        {
          label: "变动",
          value: "2",
        },
        {
          label: "阶梯",
          value: "3",
        },
      ],
      dialogTableVisible: false,
      title: "",
      list: true,
      num: 0,
      count: 0,
      flag: 0,
      kingBomEntity: {
        kingBomDetailEntities: [],
        kingBomEntity: {
          bomAs: "",
          bomClassify: "",
          bomDesc: "",
          bomGroup: "",
          bomUseTo: "",
          bomVersion: "",
          chiMaterialName: "",
          chiMeteringUnitName: "",
          chilMaterialCode: "",
          childUnitCode: "",
          createBy: "",
          createDeptId: "",
          createTime: "",
          docTypeCode: "",
          id: "",
          isChange: "",
          model: "",
          pageNo: 0,
          pageSize: 0,
          parMaterialName: "",
          parMeteringUnitName: "",
          params: {},
          parentMaterialCode: "",
          parentMaterialUnit: "",
          remark: "",
          searchValue: "",
          updateBy: "",
          updateTime: "",
        },
      },
      dataList: [],
      gridData: [],
    };
  },
  methods: {
    // 获取每次点击的内容进行区分，并在此方法内进行打开弹窗及数据的请求
    openList(item, i) {
      this.count = i;
      this.dialogTableVisible = true;
      this.title = item;
      if (this.title == "父项物料编码") {
        this.gridData = [];
        getMaterialList().then((res) => {
          if (res.code == 200) {
            this.gridData = res.data.records;
          }
        });
      }else if (this.title=='子项物料编码') {
           getMaterialList({
            parentMaterialCode: this.kingBomEntity.kingBomEntity.parentMaterialCode
           }).then((res) => {
          if (res.code == 200) {
            // console.log(res,'子项');
            this.gridData = res.data.records;
          }
        });
      } 
      else if (this.title == "父项物料单位") {
        getKingBaseMeteringUnitList().then((res) => {
          if (res.code == 200) {
            this.gridData = res.rows;
          }
        });
      } else if (this.title == "BOM分组") {
        this.gridData = [];
      } else if (this.title == "明细") {
  if ( this.kingBomEntity.kingBomDetailEntities[this.count].deptId==null) {
               this.gridData = [];
        }else{
           getWarehouseList({
            deptId:this.kingBomEntity.kingBomDetailEntities[this.count].deptId
          }).then((res)=>{
          if (res.code==200) {
            this.gridData=res.rows
          }
        })
        }
        
       
      } else if (this.title == "单位") {
        getKingBaseMeteringUnitList().then((res) => {
          if (res.code == 200) {
            this.gridData = res.rows;
          }
        });
      }
    },
    // 获取点击的表格内容并且关闭弹窗且进行内容的回显
    getRow(row) {
      this.dialogTableVisible = false;
      if (this.title == "父项物料编码") {
        this.kingBomEntity.kingBomEntity.parentMaterialCode = row.materialGroup;
      } else if (this.title == "父项物料单位") {
        this.kingBomEntity.kingBomEntity.parentMaterialUnit =
          row.meteringUnitCode;
        this.kingBomEntity.kingBomEntity.parentMaterialName =
          row.meteringUnitName;
      } else if (this.title == "BOM分组") {
      } else if (this.title == "明细") {
        // sendWarehouseCode
      
         this.kingBomEntity.kingBomDetailEntities[this.count].sendWarehouseCode =
          row.wareCode;
         this.kingBomEntity.kingBomDetailEntities[this.count].sendWarehouseName =
          row.wareName;
        this.flag = 2;
      } else if (this.title == "单位") {
        // console.log(this.count);
        this.kingBomEntity.kingBomDetailEntities[this.count].childUnitCode =
          row.meteringUnitCode;
        this.flag = 1;
      }else if (this.title=='子项物料编码') {
        this.kingBomEntity.kingBomDetailEntities[this.count].childMaterialCode=row.materialCode
        this.kingBomEntity.kingBomDetailEntities[this.count].childMaterialName=row.materialName
        this.kingBomEntity.kingBomDetailEntities[this.count].taxPrice=row.model
        this.kingBomEntity.kingBomDetailEntities[this.count].deptId=row.sendDeptCode
      }
    },

    getKingDocType() {
      getKingDocTypeList({}).then((res) => {
        // console.log(res);
      });
    },

    selectProject() {
      getMaterial({
        pageNo: 1,
        pageSize: 5,
        materialProperty: 2,
        allowProduce: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.dataList = res.data.records;
        }
      });
    },
    handleDataAdd() {
      if (this.kingBomEntity.kingBomDetailEntities == undefined) {
        this.kingBomEntity.kingBomDetailEntities = [];
      }
      let outher = {
        bomId: "",
        childBomVersion: "",
        childMaterialCode: "",
        childMaterialName: "",
        childType: "",
        childUnitCode: "",
        createBy: "",
        createTime: "",
        fixedLoss: "",
        id: "",
        pageNo: 0,
        pageSize: 0,
        params: {},
        remark: "",
        remarks: "",
        searchValue: "",
        sendDeptCode: "",
        sendWarehouseCode: "",
        supplyDeptCode: "",
        supplyType: "",
        updateBy: "",
        updateTime: "",
        usageDenominator: "",
        usageNumerator: "",
        usageType: "",
        varLossRate: "",
      };
      this.kingBomEntity.kingBomDetailEntities.push(outher);
    },
    handleDataDelete(index, row) {
      this.$confirm("请确认是否要删除此行？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.kingBomEntity.kingBomDetailEntities.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addNewRow() {
      this.handleDataAdd();
    },
    // onSubmit() {
    //   this.kingBomEntity.kingBomDetailEntities.id = new Date();
    //   // console.log(this.kingBomEntity);
    //   addBOMList(this.kingBomEntity).then((res) => {
    //     if (res.code === 200) {
    //       this.$message({
    //         message: "新增成功！",
    //         type: "success",
    //       });
    //     }
    //   });
    // },
     submit() {
      this.$refs["formRef"].validate((valid) => {
        if (!valid) {
          this.$message.error("请填写完整信息！");
          return;
        }
        // TODO 提交表单

      this.kingBomEntity.kingBomDetailEntities.id = new Date();
       this.kingBomEntity.kingBomEntity.KING_BOM= "29";
        this.kingBomEntity.kingBomEntity.businessType= "29";
        this.kingBomEntity.kingBomEntity.modelId= this.$store.state.workflow.businessConfig.id,
      addBOMList(this.kingBomEntity).then((res) => {
        if (res.code === 200) {
           this.$message({
              message: "发起流程成功！",
              type: "success",
            });
            this.$store.commit("workflow/SET_BUSINESSDRAWER", false);
        }
      });
      });
    },
  },
  created() {
    this.selectProject();
    // this.getKingDocType();
  },
};
</script>
<style lang="scss" scoped>
.divider {
  margin: 0;
}
.el-icon-search {
  margin-top: 70% !important;
}
</style>
